<template>
	<div>
		<div class="static">
			<el-input placeholder="请输入用户名" class="input" size="large" />
			<div class="block">
				    <span class="demonstration"></span>
				    <el-date-picker
				      type="date"
				      placeholder="选择日期">
				    </el-date-picker>
				</div>
			</el-input>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="测试语句">
							<span>{{ props.row.content }}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="编号" >
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="用户名" >
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.username }}</span>
				</template>
			</el-table-column>
			<el-table-column label="时间" >
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.time }}</span>
				</template>
			</el-table-column>
			<el-table-column label="试卷名" >
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.title }}</span>
				</template>
			</el-table-column>
			<el-table-column label="校验结果" >
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.result }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="dialogVisible = true">删除
					</el-button>
					<el-dialog
					  title="提示"
					  :visible.sync="dialogVisible"
					  width="30%"
					  :before-close="handleClose">
					  <span>确定删除这条日志吗</span>
					  <span slot="footer" class="dialog-footer">
					    <el-button @click="dialogVisible = false">取 消</el-button>
					    <el-button type="primary" @click="dialogVisible = false;handleDelete(scope.row)"> 确 定</el-button>
					  </span>
					</el-dialog>
				</template>
			</el-table-column>
		</el-table>


		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
		</el-pagination>


	</div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      currentPage: 1,
      tableData: [],
	  pageSize: 10, // 每页的数据条数
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(row) {
      // 删除
	  this.$axios.post("/api/check/del", {id:row.id}).then(res=>{
		  this.seach({});
	  })
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 搜索
    seach(params) {
      this.$axios.post("/api/check/selof", params).then(
        // 返回值
        (res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.data.length;
        }
      );
    },
  },
  created() {
    this.seach({});
  },
};
</script>

<style>
.static {
  display: flex;
  width: 70%;
  margin-bottom: 60px;
  height: 35x;
}

/* .input {
		position: absolute;
	}
	.btn2 {
		position: absolute;
	} */
.el-input {
  width: 30%;
}

/* .el-row {
		width: 70%;
	} */
</style>
